<template>
	    <div class="denglu">
	       <div class="title">
	        <span>江西省水利学会</span>
	        <br><br>
	        <span>数字化办公平台1.0</span>
	 </div>
	 <div class="beijin"></div>
	 <div class="yemian">
	    <div class="top">
	       
	     </div>
	     <div class="zhanghao"><h2>登录</h2>
	    <a-form
		:colon="false"
		 @finish="onFinish"
		:label-col="{ span: 4 }"
		    :wrapper-col="{ span: 20 }"
		style="width:360px;margin-top:78px"
	       :model="formState"
	       
	     >
	       <a-form-item
	         label="用户名"
	         name="userName"
	         :rules="[{ required: true, message: '用户名' }]"
	       >
	         <a-input v-model:value="formState.userName">
	           <template #prefix>
	             <UserOutlined class="site-form-item-icon" />
	           </template>
	         </a-input>
	       </a-form-item>
	   
	       <a-form-item
	         label="密码"
	         name="password"
	         :rules="[{ required: true, message: '密码' }]"
	       >
	         <a-input-password v-model:value="formState.password">
	           <template #prefix>
	             <LockOutlined class="site-form-item-icon" />
	           </template>
	         </a-input-password>
	       </a-form-item>
	   
	       
	   
	       <a-form-item label=" " >
	         <a-button block  type="primary" html-type="submit" >
	          登录
	         </a-button>
	        
	       </a-form-item>
	     </a-form>
	   
	    
	
	    
	    
	    </div>
	     
	 </div>
	
	
	
	
	
	    </div>
</template>

<script>
	import axios from 'axios';
	import md5 from "js-md5";
	import {useRouter} from 'vue-router'
	import {defineComponent,reactive } from 'vue'
	// import {assetapisystemuserloginToken,assetapisystemusergetUserInfo} from '../../../api/manpart.js'
	export default defineComponent({
		setup() {
			let formState=reactive({
				userName:'',
				password:''
			})
			const $route=useRouter()
			const login=()=>{
				// 发起一个post请求
				axios({
				  method: 'get',
				  url: 'http://10.36.15.9:9090/user-center/oauth/token',
				  params: {
				    username:formState.userName,
				    password:md5(formState.password),
				    client_id:'gateway-client',
				    grant_type:'password',
				    client_secret:'Jxsky8888@'
				  }
				}).then(function (resp) {
					let res=resp.data
					
					localStorage.setItem('shuilixiehui-token',res.token_type+' '+res.access_token)
					
					getUser(res.token_type+' '+res.access_token)
					}).catch(err=>{
						let mes=err.response.data&&err.response.data.message?err.response.data.message:'登录错误'
						globalVar.Message.warning(mes)
					})
				

				
			}
			
			const getUser=(Authorization)=>{
				
				axios({
				  method: 'post',
				  url: 'http://10.36.15.9:9090/user-center/sky/oauth2/api/v1/login/getUserInfo',
				  headers: {'Authorization': Authorization},
				}).then(function (resp) {
					let res=resp.data
					
				
					
					localStorage.setItem('shuilixiehui-user',JSON.stringify(res.object))
					$route.push({
						path:'/wrap'
					})
					}).catch(err=>{
						let mes=err.response.data&&err.response.data.message?err.response.data.message:'登录错误'
						globalVar.Message.warning(mes)
					})
				
				
				
			}
			
			const onFinish = (values) => {
				
			  login()
			};
			return{
				onFinish,
				formState,
				login
			}
		}
	})
</script>

<style scoped>
	
	
	
	.denglu{
	    position: relative;
	   
	    width:100%;
		height:100%;
		overflow: hidden;
	    background-image: url(./images/背景.png);
	}
	.denglu .title{
	    position: absolute;
	    top: 151px;
	    left: 236px;
	   
	    height: 100px;
	}
	.denglu .title span{
	    width: 338px;
	height: 39px;
	font-size: 40px;
	font-family: PingFang SC;
	font-weight: 800;
	color: #FFFFFF;
	line-height: 32px;
	letter-spacing: 3px;
	}
	.beijin{
	    position: absolute;
	    left: 235px;
	    top: 279px;
	    width: 646px;
	    height: 557px;
	    background-image: url(./images/装饰.png);
	}
	.yemian{
	    position: absolute;
	    right: 60px;
	    top: 173px;
	    width: 450px;
	    
	    background-color: #ffffff;
	}
	.top{
	    height: 34px;
	    
	}
	.top img{
	    float: right;
	    margin-top: 9px;
	    margin-right: 10px;
	    width: 18px;
	    height: 21px;
	}
	.zhanghao{
	    position: relative;
	    margin-left: 39px;
	    height: 359px;
	    
	}
	h2{width: 70px;
	height: 32px;
	font-size: 34px;
	font-family: Microsoft YaHei;
	font-weight: bold;
	color: #35476B;
	}

	  



	   
	   
</style>